<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-color: #F8F9FA;">
    <div class="slideshow-container">
        <img class="mySlides fade" src="../resources/vertical-test-1.jpg">
        <img class="mySlides fade" src="../resources/vertical-test-2.jpg">
        <img class="mySlides fade" src="../resources/vertical-test-3.jpg">
        <img class="mySlides fade" src="../resources/vertical-test-4.jpg">
        
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
        
        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
            <span class="dot" onclick="currentSlide(4)"></span>
        </div>
    </div>
    
    <script>
        var slideIndex = 0;
        showSlides();
        
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }
        
        function currentSlide(n) {
            showSlides(slideIndex = n - 1);
        }
        
        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            
            if (n === undefined) {
                slideIndex++;
            } else {
                slideIndex = n;
            }
            
            if (slideIndex > slides.length) {
                slideIndex = 1;
            }
            
            if (slideIndex < 1) {
                slideIndex = slides.length;
            }
            
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
        }
        
        setInterval(function() {
            plusSlides(1);
        }, 6000); // 切换图片的时间间隔，单位为毫秒
    </script>
</body>
</html>